<template>
  <div>
    <Header></Header>

    <div class="block">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="标题" prop="title">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>

        <el-form-item label="摘要" prop="desription">
          <el-input type="textarea" v-model="ruleForm.desription"></el-input>
        </el-form-item>

        <el-form-item label="内容" prop="content">
          <mavon-editor v-model="ruleForm.content"></mavon-editor>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
    import Header from '../components/Header';
    export default {
        name: "BlogEdit",
        components: {
          Header : Header
        },
        data() {
          return {
            ruleForm: {
              id: '',
              title: '',
              desription: '',
              content: ''
            },
            rules: {
              title: [
                { required: true, message: '请输入标题', trigger: 'blur' },
                { min: 3, max: 25, message: '长度在 3 到 25 个字符', trigger: 'blur' }
              ],
              desription: [
                { required: true, message: '请输入摘要', trigger: 'blur' }
              ],
              content: [
                { required: true, message: '请输入内容', trigger: 'blur' }
              ]
            }
          };
        },
        methods: {
          submitForm(formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                this.$axios.post('/blog/edit', this.ruleForm, {
                  headers: {
                    "Authorization": localStorage.getItem('token')
                  }
                }).then(result => {
                  console.log(result);
                  this.$alert('操作成功', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                      this.$router.push('/blogs');
                    }
                  });
                });
              } else {
                console.log('error submit!!');
                return false;
              }
            });
          },
          resetForm(formName) {
            this.$refs[formName].resetFields();
          }
        },
        created() {
          //从路由中获取当前博客id
          const blogId = this.$route.params.blogId;
          if(blogId){
            this.$axios.get('/blog/'+blogId).then(result => {
              const blog = result.data.data;
              this.ruleForm.id = blog.id;
              this.ruleForm.desription = blog.desription;
              this.ruleForm.title = blog.title;
              this.ruleForm.content = blog.content;

            })
          }
        }
    }
</script>

<style scoped>
  .block {
    text-align: center;
  }
</style>
